tinyMCEPopup.requireLangPack();

var StyleLibraryFontDialog = {
	init : function() {
		var f = document.forms[0];

		document.getElementById('previewbg_pickcontainer').innerHTML = getColorPickerHTML('previewbg_pick','previewbg');

		fntFont.init(tinyMCEPopup.editor);
		//cellProp.init(tinyMCEPopup.editor);
		//BorderPicker.init(tinyMCEPopup.editor);
		//mrgMargin.init(tinyMCEPopup.editor);
		
		TinyMCE_EditableSelects.init();

		initDesigner("dialog");
	}
};

tinyMCEPopup.onInit.add(StyleLibraryFontDialog.init, StyleLibraryFontDialog);

function initDesigner(caller)
{
	// Run only if all loaded
	switch(caller) {
		case "frame":
			frameLoaded = true;
			break;
		case "dialog":
			dialogLoaded = true;
			break;
		case "css":
			if(tinymce.isGecko) { return; }  // Never runs. Gecko does not call this way.
			cssLoaded = true;
			break;
	}
	if(!frameLoaded || !dialogLoaded || (!tinymce.isGecko && !cssLoaded)) {
		return;
	}

	// Configure which rules allow what properties.
	for(var i = 0; i < designer.rules.length; i++)
	{
		// All fonts use only font rules.
		designer.rules[i].properties.initFont();
	}

	// Load necessary CSS files	in preview frame
	loadPreviewStyles(window.frames['demoFrame'].document, 
		tinyMCEPopup.editor.getParam("stylelibrary_previewstyles", 
			tinyMCEPopup.editor.getParam("content_css")));
	
	// Parse input, get dom pointers, create dom rules.
	designer.init(window.frames['demoFrame'].document, "wysiwyg");

	// Font designer dynamically creates preview iframe content.
	createFontDemo();
	
	previewSettings.switchLorem(false, true);
	previewSettings.demoBgInit();
	setTask('style');
	updateDemo();

	// Show dropdown with styles or one input box if creating a new.	
	if(document.getElementById("hdnOriginalName").value == "NewStyle")
	{
		document.getElementById("ddlStyle").style.display = 'none';
	}
	else
	{
		document.getElementById("txtNewName").style.display = 'none';
	}
}

function updateDemo()
{
	var output = document.getElementById("hdnCssOutput");
	
	designer.generateOutput();
	designer.updateCssDom();
	output.value = removeNL(designer.getCss());
	
	if(DEBUGJS)
	{
		alert(output.value);
	}
}


// Create contents of DemoFont.html iframe dynamically for available font styles!
// Also populate the available styles dropdown list
function createFontDemo()
{
	var doc = window.frames['demoFrame'].document;
	var container = doc.getElementById("container");
	var ddl = document.getElementById("ddlStyle");
	var hdnOriginalName = document.getElementById("hdnOriginalName");
	var selected = 0;
	
	for(var i = 0; i < designer.rules.length; i++)
	{
		var sels = designer.rules[i].selector.split(',');
		var name = sels[0].replace(/^\./, '');
		name = name.trim();
		
		var p = doc.createElement('p');
		var div = doc.createElement('div');
		div.innerHTML = name;
		div.className = 'dest' + i;
		p.appendChild(div);
		p.className = name;
		container.appendChild(p);
		
		ddl.options[ddl.length] = new Option(name, i);

		if(name == hdnOriginalName.value)
		{
			selected = ddl.length -1;
		}
		
		/*p = doc.createElement('p');
		p.innerHTML = "Lorem ipsum";
		p.id = 'loremp' + i;
		container.appendChild(p);*/
	}
	
	ddl.selectedIndex = selected;
}

function validateName()
{
	var newName =  document.getElementById("txtNewName").value;
	if(!newName.match(/^[a-z]+[a-z0-9_-]*$/i))
	{
		alert(tinyMCEPopup.editor.getLang('stylelibrary_dlg.spec_chars'));
		return false;
	}
	// Check conflict with existing names
	var ddl = document.getElementById("ddlStyle");
	for(var i = 0; i < ddl.options.length; i++)
	{
		if(!ddl.options[i].selected && ddl.options[i].text == newName)
		{
			alert(tinyMCEPopup.editor.getLang('stylelibrary_dlg.name_exists'));
			return false;
		}
	}
	
	return true;
}

// ****** EVENTS ********

function taskChanged()
{
	var task = getTask();
	var style = getStyle();
	switch(task) {
		case "style":
			fntFont.initFromRule(designer.rules[style]);
			break;
	}
}

function updateName()
{
	var target = window.frames['demoFrame'].document;
	if(validateName()) 
	{
		var tmpIndex = document.getElementById('ddlStyle').selectedIndex;
		var tmpName = document.getElementById("txtNewName").value;
		document.getElementById('ddlStyle')[tmpIndex].innerHTML = tmpName;
		updateDemo();
		jQuery("div.dest"+tmpIndex,target)[0].lastChild.nodeValue = tmpName;
	}
}
